<template>
	<view>
		<!--密码-->
		<view class="xs" v-if="guanbimm==true" @click="guanbi_input">
		</view>
		<view v-if="guanbimm==true" class="wallets-password">
			<view class="input-content-wrap">
				<view class="top">
					<view @click="mxmmguanbi" class="close">×</view>
					<view class="txt">请输入支付密码</view>
					<view @click="wjmm" class="forget">忘记密码</view>
				</view>
				<view class="actual_fee">
					<text>消费{{goods.moxing_duihuan}}积分</text>

				</view>

				<view @click="set_Focus" class="input-password-wrap">
					<view class="password_dot">
						<i v-if="wallets_password.length>=1"></i>
					</view>
					<view class="password_dot">
						<i v-if="wallets_password.length>=2"></i>
					</view>
					<view class="password_dot">
						<i v-if="wallets_password.length>=3"></i>
					</view>
					<view class="password_dot">
						<i v-if="wallets_password.length>=4"></i>
					</view>
					<view class="password_dot">
						<i v-if="wallets_password.length>=5"></i>
					</view>
					<view class="password_dot">
						<i v-if="wallets_password.length>=6"></i>
					</view>
				</view>
			</view>
			<input @input="set_wallets_password" class="input-content" type="number" :focus="isFocus" maxlength="6" />
		</view>

		<block v-if="chongshi==true">
			<view class="xs" v-if="chongshi==true">
			</view>
			<view class="modal-dialog1">
				<view class="modal-title">您输入密码错误，请重新输入正确的密码！</view>
				<view @click="mxmmguanbi_1" class="payment-btn" :class="[isIphoneX?'payment-bottom':'']"
					style="color:#00a2ff; font-size:30upx; width: 100%;text-align: center; border: 1upx solid #d4d4d4;">
					重试</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
					return {
					    guanbimm:false,
						zhifu:false,//显示提示支付内容
						isFocus:false,
						chongshi:false,
						wallets_password:'',//支付密码
					}
			   },
		
		methods:{
		
		//密码操作
					
					wjmm(e){
					     uni.navigateTo({
					     	url:'/setcontent/xiugaizhifumm'
					     })
					},
					 mxmmguanbi(e){
						this.wallets_password='';
						this.guanbimm=false; 
						this.flag = !1;
							  
					
					},
						  
					mxmmguanbi_1(e){
						this.wallets_password='';
						this.isFocus=false;
						this.guanbimm=true;
						this.chongshi=false;
					
					
					},
					guanbi_input() {//取消聚焦
						this.isFocus=false;
							   
					  },
					set_Focus() {//聚焦input
					console.log(this.isFocus);
						if(this.isFocus)
						{
							this.isFocus=false;
						}
						else{
							this.isFocus=true;
						}
						this.guanbimm=true;
						this.chongshi=false;
					
					  },
		
		
					//账号支付密码
					  set_wallets_password(e){
						  // console.log(e);
					           
							  this.wallets_password=e.detail.value;  
							  
							  
							  if (this.wallets_password.length == 6) {//密码长度6位时，自动验证钱包支付结果
								var that=this;
							
								var userInfo= uni.getStorageSync('userInfo');
								//验证支付密码
								uni.request({
								    url: api['apiroot']+'order/pay-passworrd', 
									  data: {
												pay_password:that.wallets_password,
												
												
												
												access_token:userInfo['access_token'],
												_version:'2.8.9',
												_platform:'wx',
									        },
									method :"POST",
									dataType:'json', //默认 json格式
								    header: {
								        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
								    },
								    success: (res) => {
										console.log(res);
									 if(res.data.code==500){
										 this.mxmmguanbi();
										 uni.showModal({
										     title: '温馨提示',
										     content: '您还没设置支付密码,现在跳转到设置支付密码？',
										     success: function (res) {
										         if (res.confirm) {
										             uni.navigateTo({
										                 url: '/setcontent/xiugaizhifumm',
										             });
										         } else if (res.cancel) {
										             
										         }
										     }
										 });
									 }
									 else{
										 
										 if(res.data.code==1){
										 	that.chongshi=true;
										 	that.guanbimm=false;
										 }
										 else{
										 	that.paysuccess('BALANCE_PAY');//余额支付
										 	that.guanbimm=0;
										 }
										 
									 }
										
										
								
									},
								})
							
							   
							  }
					   },
		
		
		       //账号密码输入成功(WECHAT_PAY//微信支付；BALANCE_PAY//余额支付)
					
				
					paysuccess(e){
						var that=this;
					    console.log(e);
						var pay_times=that.pay_times+1;
		
						uni.request({
						    url: api['apiroot']+'order/pay-data', 
							data:{
								access_token:that.userInfo['access_token'],
								order_id:that.order_id,
								pay_type:e,
								parent_user_id:0,
								condition: 2,
								order_id_list:'',
								pay_times:pay_times,
								_platform:'wx',
								_version:'2.8.9',
								
							
								
							},
						   
							method :"GET",
							dataType:'json', //默认 json格式
						    header: {
						         'custom-header': 'hello' //自定义请求头信息
						    },
						    success: (res) => {
								console.log(res);
								if(res.data.code==0){
									if(e=="BALANCE_PAY"){
											uni.reLaunch({
												url: '/pages/money/paySuccess?order_id='+that.order_id+'&price='+that.order_detail.pay_price,
											});
									}else if(e=="WECHAT_PAY"){
										uni.requestPayment({
										    provider: 'wxpay',
										    timeStamp:res.data.data.timeStamp,
										    nonceStr: res.data.data.nonceStr,
										    package:  res.data.data.package,
										    signType: res.data.data.signType,
										    paySign:  res.data.data.paySign,
										    success: function (res) {
												
												uni.request({
												    url: api['apiroot']+'order/pay-success', 
													data:{
														access_token:that.userInfo['access_token'],
														order_id:that.order_id,
														pay_times:pay_times,
														
													},
												   
													method :"GET",
													dataType:'json', //默认 json格式
												    header: {
												         'custom-header': 'hello' //自定义请求头信息
												    },
												    success: (res) => {
														
														 if(pay_times==2){
															console.log(res.data.weikuan);
															uni.request({
															    url: api['apiroot']+'order/edit-weikuan', 
																data:{
																	access_token:that.userInfo['access_token'],
																	order_id:that.order_id,
																	weikuan:res.data.weikuan,
																	order_no:that.order_detail['order_no'],
																	
																},
															   
																method :"GET",
																dataType:'json', //默认 json格式
															    header: {
															         'custom-header': 'hello' //自定义请求头信息
															    },
																	
															    success: (res) => {
																	
																},
															})
															
														}
															uni.reLaunch({
																url: '/pages/money/paySuccess?order_id='+that.order_id+'&price='+that.order_detail.pay_price,
															});
														},
												})
										       
										    },
										    fail: function (err) {
										       
												uni.showModal({
												    title: '温馨提示',
												    content: '订单尚未支付',
													showCancel:false,
												    success: function (res) {
												        if (res.confirm) {
												            uni.redirectTo({
												            	url: '/pages/order/order',
												            })
												        } 
												    }
												});
										    }
										});
									}
									
								}
								else{
									uni.showToast({
									    title: '支付失败',
									    duration: 2000
									});
								}
								
								
								  
							 
							  }
							
							  
								
						
						})
					},
			}
	}
</script>

<style>
.modal-dialog1 {
	  width: 46%;
	  overflow: hidden;
	  position: fixed;
	  top: 34%;
	  left: 24%;
	  z-index: 9999;
	  background: #fff;
	  margin: 0 auto;
	  border-radius: 14upx;
	  margin-left: 15upx;
	  height: 22%;
	  padding-left: 24upx;
	  padding-right: 24upx;
	  z-index: 999999;
	  
	}
	.modal-title {
	  padding-top: 24upx;
	  font-size: 26upx;
	  color: #030303;
	  text-align: center;
	}
	
	.modal-content {
	  padding: 20upx 10upx;
	  }
	.payment-btn {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: 0;
	  height: 90upx;
	  line-height: 90upx;
	  font-size: 28upx;
	  border-radius: 0;
	  font-size: 32upx;
	  margin: 0 auto;
	}
	.xs{
	  width: 100%;
	  height: 100%;
	  opacity: 0.5;
	  background: #000000;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 99999;
	}
	
	.wallets-password {
	  position: absolute;
	  left: 50%;
	  top: 64rpx;
	  z-index: 99999;
	}
	
	 .wallets-password .input-content-wrap {
	  position: absolute;
	  top: 200upx;
	  left: 50%;
	  display: flex;
	  flex-direction: column;
	  width: 600upx;
	  margin-left: -300upx;
	  background: #fff;
	  border-radius: 20upx;
	}
	
	 .wallets-password .input-content-wrap .top {
	  display: flex;
	  align-items: center;
	  height: 90upx;
	  border-bottom: 2upx solid #ddd;
	  justify-content: space-around;
	}
	
	 .wallets-password .input-content-wrap .top .close {
	  font-size: 44upx;
	  color: #999;
	  font-weight: 100;
	  position: absolute;
	  left: 18upx;
	  top: 2%;
	
	}
	
	 .wallets-password .input-content-wrap .top .forget {
	  color: #00a2ff;
	  font-size: 22upx;
	  position: absolute;
	  right: 4%;
	  float: right;  
	}
	
	 .wallets-password .input-content-wrap .actual_fee {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #333;
	  height: 100upx;
	  margin: 0 23upx;
	
	  font-weight: bold;
	  border-bottom: 2upx solid #ddd;
	}
	
	.wallets-password .input-content-wrap .actual_fee span {
	  font-size: 24upx;
	}
	
	 .wallets-password .input-content-wrap .actual_fee text {
	  font-size: 36upx;
	}
	
	 .wallets-password .input-content-wrap .input-password-wrap {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 150upx;
	}
	
	.wallets-password .input-content-wrap .input-password-wrap .password_dot {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	  color: #000;
	  box-sizing: border-box;
	  width: 90upx;
	  height: 90upx;
	  border: 2upx solid #ddd;
	  border-left: none 0;
	}
	.wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
	  border-left: 2upx solid #ddd;
	}
	
	 .wallets-password .input-content-wrap .input-password-wrap .password_dot i {
	  background: #000;
	  border-radius: 50%;
	  width: 20upx;
	  height: 20upx;
	}
	.wallets-password .input-content {
	  position: fixed;
	  opacity: 0;
	  left: -100%;
	  top: 600upx;
	  background: #f56;
	  z-index: -999;
	}
	
	.wallets-password .input-content.active {
	  z-index: -99;
	}
</style>
